<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>展示所有数据的也买你</title>
    <!--引入axios.js库-->
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <a href="addBrand.html"><input type="button" value="新增"></a><br>
    <hr>
    <table id="brandTable" border="1" cellspacing="0" width="100%">
        <!--===============Vue需要使用到的，原生JS是直接采用字符串拼接==============-->
        <tr>
            <th>序号</th>
            <th>品牌名称</th>
            <th>企业名称</th>
            <th>排序</th>
            <th>品牌介绍</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        <!--使用v-for遍历tr-->
        <tr v-for="(brand,i) in brands" align="center">
            <td>{{i + 1}}</td>
            <td>{{brand.brandName}}</td>
            <td>{{brand.companyName}}</td>
            <td>{{brand.ordered}}</td>
            <td>{{brand.description}}</td>
            <td>{{brand.statusStr}}</td>
            <td><a href="#">修改</a> <a href="#">删除</a></td>
        </tr>
        <!--=========================================================================-->
    </table>
</div>
</body>
<script>
    /*
        //原生JS
        //当页面加载完成后，发送AJAX请求
        window.onload = function () {
            //1、发送AJAX请求
            axios({
                method:"get",
                url:"http://localhost:8080/day13_brand-demo/selectAllServlet"
            }).then(function (resp) {
                //2、获取响应数据
                let brands = resp.data;
                //显示表头数据，表头不参与遍历
                let tableData =
                    "<tr>\n" +
                    "        <th>序号</th>\n" +
                    "        <th>品牌名称</th>\n" +
                    "        <th>企业名称</th>\n" +
                    "        <th>排序</th>\n" +
                    "        <th>品牌介绍</th>\n" +
                    "        <th>状态</th>\n" +
                    "        <th>操作</th>\n" +
                    "    </tr>";
                //3、遍历JSON字符串数组，获取数组中每一个brand对象
                for (let i = 0; i < brands.length; i++) {
                    let brand = brands[i];
                    tableData += "\n"+
                        "<tr align=\"center\">\n" +
                        "        <td>"+(i+1)+"</td>\n" +
                        "        <td>"+brand.brandName+"</td>\n" +
                        "        <td>"+brand.companyName+"</td>\n" +
                        "        <td>"+brand.ordered+"</td>\n" +
                        "        <td>"+brand.description+"</td>\n" +
                        "        <td>"+brand.statusStr+"</td>\n" +
                        "        <td><a href=\"#\">修改</a> <a href=\"#\">删除</a></td>\n" +
                        "    </tr>";
                }
                //将数据在表格中显示
                document.querySelector("#brandTable").innerHTML = tableData;//切记别给tableData加引号
            });
        }
        */

    /**
     * 采用Vue
     * 1、使用一个id为app的div将body里面的html的代码套起来
     * 2、设置表头，表头无法通过遍历得到
     */
    new Vue({
        el:"#app",
        //设置模型，将数据设置成模型，方便将Vue对象的数据展示到网页上
        data(){
            return{
                brands:[]
            }
        },
        //Vue的生命周期方法，页面加载完成就立马执行
        mounted(){
            //将Vue对象赋值给一个变量，方便将axios获取的响应数据传递给Vue对象，然后响应到网页上
            var vue = this;
            axios({
                method:"post",
                url:"http://localhost:8080/day13_brand-demo/selectAllServlet"
            }).then(function (resp) {
                vue.brands = resp.data;
            });
        }
    });
</script>
</html>